<template>
  <div>
    <el-container>
      <el-main>
        <el-card class="box-card">
          <el-form :inline="true">
            <el-form-item>
              <el-button type="primary" class="button" @click="dialogFormVisible = true">课程添加</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" style="width: 100%" class="table" stripe>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" class="table-expand">
                  <el-form-item label="幼儿要求">
                    <span>{{ props.row.course.childrenRequest? props.row.course.childrenRequest:'暂无' }}</span>
                  </el-form-item>
                  <el-form-item label="费用介绍">
                    <span>{{ props.row.course.costIntroduce? props.row.course.costIntroduce:'暂无' }}</span>
                  </el-form-item>
                  <el-form-item label="默认费用">
                    <span>{{ props.row.course.defaultCost? props.row.course.defaultCost:'暂无' }}</span>
                  </el-form-item>
                  <el-form-item label="材料费用">
                    <span>{{ props.row.course.materialCost? props.row.course.materialCost:'暂无' }}</span>
                  </el-form-item>
                  <el-form-item label="可担任教师">
                    <span><div>
                      <span v-for="item in props.row.teachers"> <el-tag type="info" effect="plain">{{ item.teacherName }}</el-tag>&nbsp;&nbsp;</span>
                    </div></span>
                  </el-form-item>
                  <el-form-item label="合作单位">
                    <span><div>
                      <span v-for="item in props.row.cooperation">  <el-tag  type="info" effect="plain">{{ item.name?item.name:'暂无' }} </el-tag>&nbsp;&nbsp;</span>
                    </div></span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column v-if="false" prop="cid" label="课程ID" width="180">
              <template slot-scope="scope">
                {{ scope.row.course.cid ? scope.row.course.cid :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="课程名称" width="180">
              <template slot-scope="scope">
                {{ scope.row.course.name ? scope.row.course.name :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="180">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.course.state === 0 ? 'info' : scope.row.course.state === 0 ? 'success':scope.row.course.state === 2 ?'danger':scope.row.course.state === 3 ?'warning':''"
                >
                  {{ scope.row.course.state === 0 ? '未审核' :scope.row.course.state === 1? '审核通过':scope.row.course.state === 2 ? '审核不通过':scope.row.course.state ===3?'审核通过但不可设为班级':'' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="introduce" label="介绍" show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ scope.row.course.introduce ? scope.row.course.introduce :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="350px">
              <template slot-scope="scope">
                <el-button size="small" type="primary" @click="handleClick(scope.$index,scope.row,)">编辑</el-button>
<!--                <el-popconfirm title="确定要删除该课程吗？">-->
<!--                  <el-button slot="reference" size="small" type="danger">删除</el-button>-->
<!--                </el-popconfirm>-->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.pageNum"
            :total="page.totalSize"
            @current-change="handleCurrentChange"
            layout="total,prev, pager, next, jumper"
            style="margin-top: 10px;float: right;margin-bottom: 10px"
          />
        </el-card>
      </el-main>
    </el-container>
    <el-dialog title="填写课程信息" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" style="width: 500px " label-position="left">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduce">
          <el-input v-model="ruleForm.introduce" />
        </el-form-item>
        <el-form-item label="幼儿要求" prop="childrenRequest">
          <el-input v-model="ruleForm.childrenRequest" />
        </el-form-item>
        <el-form-item label="费用介绍" prop="costIntroduce">
          <el-input v-model="ruleForm.costIntroduce" />
        </el-form-item>
        <el-form-item label="默认费用" prop="defaultCost">
          <el-input v-model="ruleForm.defaultCost" />
        </el-form-item>
        <el-form-item label="材料费用" prop="materialCost">
          <el-input v-model="ruleForm.materialCost" />
        </el-form-item>
        <el-form-item label="教师" prop="teachers">
          <el-select
            v-model="ruleForm.teachers"
            multiple
            filteridable
            default-first-option
            placeholder="请选择可担任课程教师"
            style="width:100%"
          >
            <el-option
              v-for="item in teacherOptions"
              :key="item.tid"
              :label="item.teacherName"
              :value="item.tid"
            />
            <div style="bottom: 0;width: 100%;background: #fff">
              <el-pagination
                small
                :current-page="pageTeacher.pageNumTeacher"
                :total="pageTeacher.totalSizeTeacher"
                layout="prev, pager,next,total"
                @current-change="handleCurrentChangeTeacher"
              />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="合作单位" prop="cooperation">
          <el-select
            v-model="ruleForm.cooperation"
            multiple
            filteridable
            default-first-option
            placeholder="请选择合作单位"
            style="width:100%"
          >
            <el-option
              v-for="item in cooperationOptions"
              :key="item.coid"
              :label="item.name"
              :value="item.coid"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false;resetForm('ruleForm')">取 消</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="submitForm();resetForm('ruleForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑课程信息" :visible.sync="editDialogFormVisible">
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px" style="width: 500px " label-position="left">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="介绍" prop="introduce">
          <el-input v-model="editForm.introduce" />
        </el-form-item>
        <el-form-item label="幼儿要求" prop="childrenRequest">
          <el-input v-model="editForm.childrenRequest" />
        </el-form-item>
        <el-form-item label="费用介绍" prop="costIntroduce">
          <el-input v-model="editForm.costIntroduce" />
        </el-form-item>
        <el-form-item label="默认费用" prop="defaultCost">
          <el-input v-model="editForm.defaultCost" />
        </el-form-item>
        <el-form-item label="材料费用" prop="materialCost">
          <el-input v-model="editForm.materialCost" />
        </el-form-item>
        <el-form-item label="教师">
          <el-select
            v-model="editForm.teachers"
            multiple
            filteridable
            default-first-option
            placeholder="请选择可担任课程教师"
            style="width:100%"
            @change="$forceUpdate()"
          >
            <el-option
              v-for="item in teacherOptions"
              :key="item.tid"
              :label="item.teacherName"
              :value="item.tid"
            />
            <div style="bottom: 0;width: 100%;background: #fff">
              <el-pagination
                small
                :current-page="pageTeacher.pageNumTeacher"
                :total="pageTeacher.totalSizeTeacher"
                layout="prev, pager,next,total"
                @current-change="handleCurrentChangeTeacher"
              />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="合作单位">
          <el-select
            v-model="editForm.cooperation"
            multiple
            filteridable
            default-first-option
            placeholder="请选择合作单位"
            style="width:100%"
            @change="$forceUpdate()"
          >
            <el-option
              v-for="item in cooperationOptions"
              :key="item.coid"
              :label="item.name"
              :value="item.coid"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="editDialogFormVisible = false;resetForm('editForm')">取 消</el-button>
          <el-button type="primary" @click.native="editSubmitForm()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { addCourse, getAllCourse } from '../../api/course'
import { getWaitApprovedCourse } from '../../api/course'
import { updateCourse } from '../../api/course'
import { getAllCooperationList } from '../../api/cooperation'
import { getTeacherList } from '../../api/teacher'

export default {
  name: 'Course',
  data() {
    var valiNumberPass1 = (rule, value, callback) => { // 包含小数的数字
      const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
      if (value === '') {
        callback(new Error('请输入费用'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }
    return {
      cid: '',
      teacherOptions: [],
      cooperationOptions: [],
      dialogFormVisible: false,
      editDialogFormVisible: false,
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      pageTeacher: {
        pageNumTeacher: 1,
        pageSizeTeacher: 10,
        totalPageTeacher: 0,
        totalSizeTeacher: 0
      },
      ruleForm: {
        name: '',
        introduce: '',
        childrenRequest: '',
        costIntroduce: '',
        defaultCost: '',
        materialCost: '',
        cooperation: [],
        teachers: []
      },
      editForm: {
        cid: '',
        name: '',
        introduce: '',
        childrenRequest: '',
        costIntroduce: '',
        defaultCost: '',
        materialCost: '',
        cooperation: [],
        teachers: []
      },
      rules: {
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入课程介绍', trigger: 'blur' }
        ],
        childrenRequest: [
          { required: true, message: '请输入幼儿要求', trigger: 'blur' }
        ],
        costIntroduce: [
          { required: true, message: '请输入费用介绍', trigger: 'blur' }
        ],
        defaultCost: [
          { required: true, validator: valiNumberPass1, trigger: 'blur' }
        ],
        materialCost: [
          { required: true, validator: valiNumberPass1, trigger: 'blur' }
        ],
        teachers: [
          { required: true, message: '请选择可担任教师', trigger: 'blur' }
        ]
        // cooperation: [
        //   { required: true, message: '请选择合作单位', trigger: 'blur' }
        // ]
      },
      course: {
        cid: '',
        name: '',
        introduce: '',
        childrenRequest: '',
        costIntroduce: '',
        defaultCost: '',
        state: 0
      },
      teacherList: [],
      cooperationList: [],
      editTeacherList: [],
      editCooperationList: []
    }
  },
  created() {
    this.getAllWaitApprovedCourse()
    this.getCooperationList()
    this.getAllTeacherList()
  },
  methods: {
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getAllWaitApprovedCourse()
    },
    handleCurrentChangeTeacher(val) {
      this.pageTeacher.pageNumTeacher = val
      this.getAllTeacherList()
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.teacherList = []
          this.cooperationList = []
          this.addTeacherList()
          this.addCooperationList()
          this.submitAddCourse()
          this.dialogFormVisible = false
        } else {
          alert('填写不符合要求')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitAddCourse() {
      addCourse({
        childrenRequest: this.ruleForm.childrenRequest,
        name: this.ruleForm.name,
        introduce: this.ruleForm.introduce,
        defaultCost: this.ruleForm.defaultCost,
        costIntroduce: this.ruleForm.costIntroduce,
        materialCost: this.ruleForm.materialCost,
        state: 0,
        cooperation: this.cooperationList,
        teachers: this.teacherList
      }).then(res => {
        this.$message.success('添加成功！')
        this.getAllWaitApprovedCourse()
      })
        .catch(err => {
          this.$message.error('添加课程请求失败！')
        })
    },
    getAllWaitApprovedCourse() {
      getWaitApprovedCourse(
        {
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
      ).then(res => {
        // this.$message.success('请求待审核课程列表成功！')
        this.tableData = res.data.list
        this.page = res.data.page
        console.log(res.data.list)
      })
        .catch(err => {
          this.$message.error('请求待审核课程列表失败！')
        })
    },
    getAllTeacherList() {
      getTeacherList({
        pageNum: this.pageTeacher.pageNumTeacher,
        pageSize: this.pageTeacher.pageSizeTeacher
      }).then(res => {
        this.teacherOptions = res.data.list
        this.pageTeacher.pageNumTeacher = res.data.page.pageNum
        this.pageTeacher.pageSizeTeacher = res.data.page.pageSize
        this.pageTeacher.totalPageTeacher = res.data.page.totalPage
        this.pageTeacher.totalSizeTeacher = res.data.page.totalSize
      })
        .catch(err => {
          this.$message.error('请求教师列表失败！')
        })
    },
    getCooperationList() {
      getAllCooperationList()
        .then(res => { this.cooperationOptions = res.data.list })
        .catch(err => {
          this.$message.error('请求合作单位列表失败！')
        })
    },
    handleClick: function(index, row) {
      this.cid = row.course.cid
      console.log(row.course.cid)
      this.editDialogFormVisible = true
      this.editForm = Object.assign({}, row.course)
      console.log(row.teachers)
      const arrIntTeachers = []
      for (var i = 0; i < row.teachers.length; i++) {
        arrIntTeachers.push(row.teachers[i].tid)
      }
      const arrIntCooperations = []
      for (var i = 0; i < row.cooperation.length; i++) {
        arrIntCooperations.push(row.cooperation[i].coid)
      }
      this.editForm.teachers = arrIntTeachers
      this.editForm.cooperation = arrIntCooperations
      console.log(arrIntTeachers)
      console.log(this.editForm.teachers)
      console.log(this.editForm.cooperation)
    },
    editSubmitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          // alert('预设成功!')
          this.editTeacherList = []
          this.editCooperationList = []
          this.addEditTeacherList()
          this.addEditCooperationList()
          console.log(this.editTeacherList + '????????????????????????')
          this.editDialogFormVisible = false
          this.submitUpdateCourse()
        } else {
          alert('填写不符合要求')
          console.log('error submit!!')
          return false
        }
      })
    },
    submitUpdateCourse() {
      console.log(this.cid)
      updateCourse({
        cid: this.cid,
        childrenRequest: this.editForm.childrenRequest,
        name: this.editForm.name,
        introduce: this.editForm.introduce,
        defaultCost: this.editForm.defaultCost,
        costIntroduce: this.editForm.costIntroduce,
        materialCost: this.editForm.materialCost,
        teachers: this.editTeacherList,
        cooperation: this.editCooperationList
      }).then(res => {
        this.$message.success('编辑成功！')
        this.getAllWaitApprovedCourse()
      })
        .catch(err => {
          this.$message.error('编辑课程请求失败！')
        })
    },
    addTeacherList() {
      for (var i = 0; i < this.ruleForm.teachers.length; i++) {
        this.teacherList.push({ id: this.ruleForm.teachers[i] })
      }
    },
    addCooperationList() {
      for (var i = 0; i < this.ruleForm.cooperation.length; i++) {
        this.cooperationList.push({ id: this.ruleForm.cooperation[i] })
      }
    },
    addEditTeacherList() {
      for (var i = 0; i < this.editForm.teachers.length; i++) {
        this.editTeacherList.push({ id: this.editForm.teachers[i] })
      }
    },
    addEditCooperationList() {
      for (var i = 0; i < this.editForm.cooperation.length; i++) {
        this.editCooperationList.push({ id: this.editForm.cooperation[i] })
      }
    }
  }
}
</script>

<style >
  .el-header{
    line-height:80px;
    margin-left: 10px;
  }
  .text{
    font-size: 20px;
    font-weight: bold;
  }
  .table-expand{
  font-size: 0;
}
  .table-expand  label{
    width: 100px;
    color: #99a9bf;
 font-weight: normal;
  }
.table-expand .el-form-item{
    margin-right: 0;
    margin-bottom: 0;
    width: 70%;
  }
</style>
<style lang="css">

  .el-tooltip__popper{font-size: 14px; max-width:50% } /*设置显示隐藏部分内容，按50%显示*/

</style>
